<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <title>登录</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

</head>


<body style=" background-image: url(image/5.jpg); background-size: cover; background-attachment: fixed ">
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

<%
    String Msg=(String) request.getAttribute("Msg");
    if(Msg==null)
        Msg="";
%>

<div style="width: 350px;margin: 200px auto 0; overflow: hidden; font-size: 30px; font-weight: bolder">
    <i class="layui-icon layui-icon-friends" style="font-size: 30px; color: #5FB878;"></i>
    <font color="white">欢迎使用健康打卡-登录</font>
</div>

<form action="LoginServlet" method="post">
    <div style="width: 420px;height: 400px;margin: 30px auto 0;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,.5);background-color:white;overflow: hidden ">

        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 20px auto">
            <ul class="layui-tab-title" style="margin: 0 30px">
                <li class="layui-this" style="font-size: 20px;font-weight: bolder">学生登录</li>
                <li style="font-size: 20px;font-weight: bolder;margin: 0 0 0 10px">教师登录</li>
                <li style="font-size: 20px;font-weight: bolder;margin: 0 0 0 10px">管理登录</li>
            </ul>
        </div>

        <div style="margin: 30px auto 0; width: 300px">
            <input type="text"  name="zhanghao" class="layui-input" placeholder="请输入学号/工号"  >
        </div>
        <div style="margin: 25px auto; width: 300px">
            <input type="password"  name="mima"  placeholder="请输入密码" class="layui-input"  >
        </div>

        <div style="margin: 25px auto; width: 300px">
            <div style="width: 170px; float: left" >
            <input type="text" name="code" placeholder="请输入验证码" class="layui-input">
            </div>
            <img src="${pageContext.request.contextPath}/CheckCodeServlet" id="img"><a href="javascript:changeImg()">换一张</a><br/>
        </div>

        <div style="margin: 10px auto; height:20px; width: 130px">
            <font color="red"><%= Msg %></font>
        </div>

        <div style="margin: 25px auto; width: 250px;height: 44px;background-color: white">
            <button type="submit" class="layui-btn layui-btn-lg" style="background-color: #5FB878;width: 118px; margin: 0 10px 0 0" >登录</button>
            <a href="register.jsp"><button type="button" class="layui-btn layui-btn-lg " style="background-color: grey;width: 118px" >注册</button></a>
        </div>
    </div>
</form>


<script>
    function changeImg(){
        var imgObj=document.getElementById("img");
        imgObj.src="CheckCodeServlet?ran="+Math.random();
    }
</script>


</body>
</html>